<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<header th:fragment="header">
    <form action="/catalog/search" method="post">

        <div id="Header">

            <div id="Logo">
                <div id="LogoContent">
                    <a th:href="@{/catalog/main}"><img src="../images/logo-topbar.gif"/></a>
                </div>
            </div>

            <div id="Menu">
                <div id="MenuContent">
                    <a th:href="@{/cart/viewCart}"><img align="middle" name="img_cart" src="../images/cart.gif" alt="view your cart"/></a>
                    <img align="middle" src="../images/separator.gif"/>
                    <a th:if="${session.loginUser.username==null}" th:href="@{/account/loginForm}">Sign In</a>
                    <a th:if="${session.loginUser.username!=null}" th:href="@{/account/signOut}">Sign Out</a>
                    <img align="middle" src="../images/separator.gif"/>
                    <a th:if="${session.loginUser.getUsername()!=null}" th:href="@{/account/myAccountForm}">My Account</a>
                    <img th:if="${session.loginUser.getUsername()!=null}" align="middle" src="../images/separator.gif"/>
                    <a th:href="@{/catalog/help}">?</a>
                    <br>
                    <p th:if="${session.loginUser!=null}" id="loginUser" th:value="${session.loginUser.username}"></p>
                </div>
            </div>

            <div id="SearchProductcontext"
                 style="background-color:white;border: 1px solid black;
                 width:119px;position: absolute;top: 50px;left:1116px;display:none">
            </div>
            <div id="Search">
                <div id="SearchContent">
                    <form action="/catalog/search" method="post">
                        <input autocomplete="off" type="text" name="keyword" size="14" id="searchproduct"/>
                        <input type="submit" name="searchProducts" value="Search"/>
                        <script type="text/javascript">
                            $(function () {
                                $('#searchproduct').on('keyup', function () {
                                    $.ajax({
                                        type: "GET",
                                        url: "/catalog/findProduct?keyword=" + this.value,
                                        success: function (data) {
                                            console.log(data);
                                            var res = data.split(",");
                                            var result = "";
                                            for (var i = 0; i < res.length; i++) {
                                                result += "<div onclick='Search_onclick(this)' onmouseout='changeBgc_out(this)' " +
                                                    "onmouseover='changeBgc_over(this)'>" + res[i] + "</div>";

                                            }
                                            $("#SearchProductcontext").html(result);
                                            //以块级元素显示
                                            $("#SearchProductcontext").css("display", "block");
                                        }
                                    });
                                });
                            });

                            //鼠标移动到内容上
                            function changeBgc_over(div) {
                                $(div).css("background-color", "#CCCCCC");
                            }

                            //鼠标离开内容
                            function changeBgc_out(div) {
                                $(div).css("background-color", "");
                            }

                            //将点击的内容放到搜索框
                            function Search_onclick(div) {
                                $("#searchproduct").val(div.innerText);
                                $("#SearchProductcontext").css("display", "none");
                            }
                        </script>
                    </form>
                </div>
            </div>
            <!--写死的快速链接注释了 Category元素数量不再固定-->
            <!--<div id="QuickLinks">-->
            <!--    <a th:href="@{/catalog/ViewCategory(categoryId=FISH)}"><img src="../images/sm_fish.gif"/></a>-->
            <!--    <img src="../images/separator.gif"/>-->
            <!--    <a th:href="@{/catalog/ViewCategory(categoryId=DOGS)}"><img src="../images/sm_dogs.gif"/></a>-->
            <!--    <img src="../images/separator.gif"/>-->
            <!--    <a th:href="@{/catalog/ViewCategory(categoryId=REPTILES)}"><img src="../images/sm_reptiles.gif"/></a>-->
            <!--    <img src="../images/separator.gif"/>-->
            <!--    <a href="ViewCategory?categoryId=CATS"><img src="../images/sm_cats.gif"/></a>-->
            <!--    <img src="../images/separator.gif"/>-->
            <!--    <a th:href="@{/catalog/ViewCategory(categoryId=BIRDS)}"><img src="../images/sm_birds.gif"/></a>-->
            <!--</div>-->
        </div>
    </form>
</header>
</body>
</html>